<template>
  <div id="openlayersContainer" ref="openlayersContainer"></div>

</template>

<script setup>
// import { View, Map, TileLayer, OSM, fromLonLat } from 'ol';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import XYZ from 'ol/source/XYZ.js'
import 'ol/ol.css'


import { onMounted, ref } from 'vue'

onMounted(async () => {
  // 天地图信息
  var token = 'ee20013ff03e7d98b23e1251bc0b7cea';
  var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
  var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];

  //map 中的配置选项：target表示地图实例挂在的容器，layers表示图层，view表示视图

  const map = new Map({
    // url: 'https://openlayers.org/en/latest/examples/data/',
    // url: tdtUrl + 'DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token,
    // subdomains: subdomains,
    target: 'openlayersContainer',
    // view表示视图
    view: new View({
      // center: fromLonLat([37.41, 8.82]),
      center: [114.3165, 30.5264],
      zoom: 11,
      projection: 'EPSG:4326'  //  设置投影 默认情况下ol使用的不是经纬度坐标系  使用的是墨卡托有影体系
      // Projection:'EPSG:3857'
    }),
    // layers表示图层
    // OSM表示openstreetmap图层
    layers: [
      new TileLayer({
        source: new XYZ({
           // 天地图
          url: 'https://t1.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token,
          // subdomains: subdomains,
          // 高德
          // url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
      }),
    ],
  });

  console.log(Map)
})


</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#openlayersContainer {
  width: 100vw;
  height: 100vh;

}
</style>
